<template>
  <el-drawer :z-index="50" size="650" v-model="visible" title="新增课程" :before-close="handleClose" :close-on-click-modal="false" destroy-on-close>
    <el-form class="form" ref="formRef" :model="form" :rules="rules" label-position="top">
      <el-form-item label="课程名称" prop="courseName">
        <el-input v-model="form.courseName" placeholder="请输入课程名称" />
      </el-form-item>
      <el-form-item label="课程主图" prop="courseCoverFiles">
        <UploadImgs v-model:fileList="form.courseCoverFiles" width="135px" height="135px" :limit="1" v-if="uploadVisble">
          <template #empty>
            <el-icon><Plus /></el-icon>
            <span>最多上传1张16:9的图片</span>
          </template>
        </UploadImgs>
      </el-form-item>
      <el-form-item label="课程视频" prop="courseVideoFiles">
        <UploadFiles v-model:fileList="form.courseVideoFiles" width="135px" height="135px" :limit="1" :fileSize="100" :fileType="['video/*']" v-if="uploadVisble">
          <template #empty>
            <el-icon><Plus /></el-icon>
            <span>视频大小限制100M</span>
          </template>
        </UploadFiles>
      </el-form-item>
      <el-form-item label="课程详情图片" prop="courseImagesFiles">
        <UploadImgs v-model:fileList="form.courseImagesFiles" width="135px" height="135px" :limit="9" v-if="uploadVisble">
          <template #empty>
            <el-icon><Plus /></el-icon>
            <span>最多上传9张图片</span>
          </template>
        </UploadImgs>
      </el-form-item>
      <el-form-item label="购买须知" prop="buyNoticeSwitch">
        <el-radio-group v-model="form.buyNoticeSwitch">
          <el-radio :value="0">关闭</el-radio>
          <el-radio :value="1">开启</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label=" " prop="buyNoticeContent">
        <el-input v-model="form.buyNoticeContent" type="textarea" placeholder="请输入购买须知" :rows="10" show-word-limit
          maxlength="1000" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确认</el-button>
      </div>
    </template>
  </el-drawer>
</template>
<script setup lang="ts">
import _ from 'lodash'
import UploadImgs from "@/components/Upload/Imgs.vue";
import UploadFiles from "@/components/Upload/Files.vue";
import { reactive, ref } from 'vue';
import { AddCourse, SaveCourse, GetCourseInfo } from '@/api/modules/service'
import { ElMessage, FormInstance, FormRules } from 'element-plus';

const visible = ref<boolean>(false)
const uploadVisble = ref<boolean>(false)
const type = ref<string>('')
let form = reactive<any>({
  courseCoverFiles: [],
  courseVideoFiles: [],
  courseImagesFiles: [],
  buyNoticeSwitch: 0,
})
const props = ref<any>({
  rowData: {}
})
const rules = reactive<FormRules>({
  courseName: [
    { required: true, message: '请输入课程名称', trigger: 'blur' },
  ],
  courseCoverFiles: [
    { required: true, message: '请上传课程主图', trigger: 'blur' },
  ]
})
/** 接收父组件传过来的参数 */
async function acceptParams(params: Partial<any> = {}, acceptType: string) {
  props.value = params
  type.value = acceptType
  visible.value = true;
  form.semesterId = params.rowData.semesterId
  if (acceptType === 'edit') {
    const { data }: any = await GetCourseInfo({ courseId: params.rowData.courseId })
    data.courseCoverFiles = data.courseCover ? [{ url: data.courseCover }] : []
    data.courseVideoFiles = data.courseVideo ? [{ url: data.courseVideo, name: data.courseName }] : []
    data.courseImagesFiles = data.courseImages.length ? data.courseImages.map((item: any) => ({ url: item })) : []
    Object.assign(form, data)
  }
  uploadVisble.value = true
};
const formRef = ref<FormInstance>()
function handleClose() {
  formRef.value!.resetFields()
  form.courseId = '';
  visible.value = false
  uploadVisble.value = false
}
async function handleConfirm() {
  await formRef.value!.validate(async (valid) => {
    if (valid) {
      form.courseCover = form.courseCoverFiles[0].url
      form.courseVideo = form.courseVideoFiles.length ? form.courseVideoFiles[0].url : ''
      form.courseImages = form.courseImagesFiles.length ?form.courseImagesFiles.map((item: any) => item.url) : []

      form.courseId ? await SaveCourse(form) : await AddCourse(form)
      ElMessage.success({ message: '操作成功' });
      props.value.getTableList!();
      handleClose()
    }
  })
}
defineExpose({
  acceptParams
});
</script>
<style lang='scss' scoped>
.flex-item {
  display: flex;
  justify-content: space-between;

  >div {
    flex: 1;

    &:first-of-type {
      margin-right: 20px;
    }

    &:last-of-type {
      margin-left: 20px;
    }
  }
}

.time-box,
.teacher-box {
  display: flex;
  align-items: center;

  &:not(:last-of-type) {
    margin-bottom: 14px;
  }

  .select-time-box {
    display: flex;
  }

  :deep(.select-item) {
    width: 160px !important;
    margin-right: 14px;
  }
}

.fix {
  margin-right: 14px;
  color: #666;
}

.setting-button {
  width: 100%;
  margin-bottom: 18px;
}

.content {
  margin-left: 22px;
  line-height: 30px;
  color: #777;
  font-size: 13px;
}

.flex-tag {
  display: flex;
  flex-wrap: wrap;

  :deep(.el-tag) {
    margin-right: 10px;
    margin-bottom: 10px;
  }

  :deep(.el-input) {
    width: 130px;
  }
}
</style>